<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>操作设备</title>
    <link rel="stylesheet" href="/static/css/weui.css" />
    <link rel="stylesheet" href="/static/css/example.css" />
    <style type="text/css">
    #imageStyle{
        width: 100%;
        max-height: 100%;
        vertical-align: top;
        border-radius: 35px;
        }
    .bn{
        position: relative;
        width: 184px;
        float: right;
        margin-left: auto;
        margin-right: auto;
        padding: 6px 12px;
        box-sizing: border-box;
        font-weight: 700;
        font-size: 10px;
        text-align: center;
        text-decoration: none;
        color: #fff;
        line-height: 1.41176471;
        border-radius: 4px;
        overflow: hidden;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        background-color: #07c160;
    }
    .bnUnable{
        position: relative;
        width: 184px;
        float: right;
        margin-left: auto;
        margin-right: auto;
        padding: 6px 12px;
        box-sizing: border-box;
        font-weight: 700;
        font-size: 10px;
        text-align: center;
        text-decoration: none;
        color: #fff;
        line-height: 1.41176471;
        border-radius: 4px;
        overflow: hidden;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        background-color: #cecece;
    }
    </style>
</head>

<body ontouchstart>
    <div class="container" id="container"></div>
    <script type="text/html" id="tpl_home">
        <div class="page">


            <div style='background-color: rgba(0,0,0,0); padding-top: 5%; padding-left: 3%; padding-right: 3%;'>
                <div class="weui-panel__bd">
                    <div class="weui-media-box weui-media-box_appmsg ">
                        <div class="weui-media-box__hd">
                            <img id="imageStyle" src="" alt="">
                        </div>
                        <div class="weui-media-box__bd">
                            <h4 id="userName" class="weui-media-box__title">用户名称</h4>
                            <p id="deviceNum" class="weui-media-box__desc">设备数量: 1</p>
                        </div>
                    </div>
                </div>
            </div>
            <HR style="FILTER:alpha(opacity=90,finishopacity=0,style=1)" width="100%"color=#ffffff SIZE=1>
            <!--  该部分设置device -->
            <div class="weui-form-preview__item">
                    <label id="deviceId" class="weui-form-preview__label" style="margin:20px;text-align-last:left">设备id</label>
                    <div style="padding:18px; ">
                        <a href="javascript:" id="bn" class="bn" >预约</a>
                    </div>
            </div>


            <div id="loadingToast" style="opacity: 0; display: none;">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-loading weui-icon_toast"></i>
                    <p class="weui-toast__content" id="flag">预约成功！</p>
                </div>
            </div>

            <div id="loadingToast1" style="opacity: 0; display: none;">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-loading weui-icon_toast"></i>
                    <p class="weui-toast__content" id="flag">预约失败！</p>

                </div>
            </div>


            <div class="weui-footer weui-footer_fixed-bottom">
            <p class="weui-footer__links">
                <p class="weui-footer__link">访问官网</p>
                <a href="http://www.zjnnhj.com" class="weui-footer__link">zjnnhj@zjnnhj.com</a>
            </p>
            <p class="weui-footer__links">
                <p class="weui-footer__link">联系我们</p>
                <a href="http://www.zjnnhj.com" class="weui-footer__link">18106532996</a>
            </p>
            <p class="weui-footer__text">Copyright © 2020 牛能环保</p>
        </div>
        </div>


        <script src="/static/js/jquery.min.js"></script>
        <script src="/static/js/weui.min.js"></script>
        <script type="text/javascript" src="/static/js/jweixin-1.4.0.js"></script>
        <script src="/static/js/zepto.min.js"></script>
        <script src="/static/js/example.js"></script>



        <script type="text/javascript">
            $(function() {

                function getQueryString(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                    var r = decodeURI(window.location.search).substr(1).match(reg);
                    if (r != null) return (r[2]);
                    return null;
                };


                $(document).ready(function() {
                    // 获取code
                    var code = getQueryString('code');
                    var status = null;
                    var deviceId = null;
                    var subed = false;

                    //  获取用户名下设备
                    if (deviceId == null){
                        $.ajax({
                                url: 'http://gzh.zjnnhj.com/niuneng/getUserDevice',
                                type: "post",
                                data: JSON.stringify({
                                    'userId': code
                                }),
                                dataType: "json",
                                success: function(data) {
                                    //data = JSON.parse(data);
                                    console.log(data);
                                    deviceId = data.result[0].deviceid;
                                    subed = data.result[0].subed;
                                    // 根据返回值执行对应的替换
                                    $('#userName').html(data.result[0].userid);
                                    $('#deviceId').html(deviceId);
                                    if (subed){
                                        document.getElementById("bn").className="bnUnable";
                                        $('#bn').attr('disabled', true).css("pointer-events","none");
                                        //$('#bn').removeClass('bn');
                                    }
                                }
                        });
                    }

                    // 修改页面显示值
                    
                    

                    if (status == 'yes'){
                        // 按钮设置不可用
                        $('#bn').attr('disabled', true).css("pointer-events","none");
                        $('#bn').removeClass('bn');

                        var $loadingToast = $('#loadingToast');
                        $loadingToast.fadeIn(100);
                        setTimeout(function () {
                            $loadingToast.fadeOut(100);
                        }, 2000);

                    } else if(status == 'no'){
                        var $loadingToast1 = $('#loadingToast1');
                        $loadingToast1.fadeIn(100);
                        setTimeout(function () {
                            $loadingToast1.fadeOut(100);
                        }, 2000);
                    } else{
                        //  直接进入时没有状态
                        if (subed){
                            $('#bn').attr('disabled', true).css("pointer-events","none");
                            $('#bn').removeClass('bn');
                            }
                    }

                    
                    //预约
                    var $loadingToast = $('#loadingToast');
                    $('#bn').on('click', function(){
                        if ($loadingToast.css('display') != 'none') return;
                        var fredirect_uri = 'http://gzh.zjnnhj.com/niuneng/toOrderdevice.html?deviceid=' + deviceId;
                        var ffurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5f2850581e4e064d&redirect_uri=" + encodeURIComponent(fredirect_uri) + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
                        location.href = ffurl;  
                    });
                  });

                        
                    });
        </script>

    </script>
</body>
</body>

</html>